<template>
  <view class="item">
    <view class="header">
      <image class="avatar" :src="
          objData.avatar
            ? objData.avatar
            : 'https://txtdev-1252097407.cos.ap-guangzhou.myqcloud.com/static/img/shop/default_avatar.png'
        ">
      </image>
    </view>
    <view class="comment">
      <view class="ss-flex ss-row-between">
        <view class="title">
          <text>{{ objData.nickname }}</text>对<text>{{ objData.studentName }}</text>{{objData.title ? objData.title : '的陪伴记录'}}
        </view>
      </view>
      <view class="content" @longpress="longPressCont(objData.id)">{{ objData.content }}</view>
      <view class="allImage" @longpress="longPressCont(objData.id)" v-if="
          objData.filePath.type == 1 && objData.filePath.path && objData.filePath.path.length > 0
        ">
        <!-- <view class="imgList" :style="{ width: objData.filePath.path.length === 4 ? '400rpx' : 'auto' }">
          <view class="images" v-for="(item, mindex) in objData.filePath.path" :key="mindex">
            <image lazy-load="true" @click="previewMedia(item, objData.filePath.path)" class="oneimg"
              :style="{width: objData.filePath.path.length === 1 ? `${objData.imageWidth}rpx` : '160rpx', height: objData.filePath.path.length === 1 ? `${objData.imageHeight}rpx` : '160rpx'}"
              :src="item" mode="aspectFill" />
          </view>
        </view> -->
        <view class="imgList" :style="{ width: objData.filePath.path.length == 4 ? '400rpx' : 'auto' }">
          <view class="images" v-for="(item, mindex) in objData.filePath.path" :key="mindex">
            <image lazy-load="true" @click="previewMedia(item, objData.filePath.path)" class="oneimg"
              :style="getImageStyle(objData.filePath.path.length)" :src="item" mode="aspectFill" />
          </view>
        </view>
      </view>
      <view class="allImage" @longpress="longPressCont(objData.id)" v-else-if="objData.filePath.type == 2">
        <view class="imgList">
          <view class="images">
            <video :controls="false" :style="{ width: `${objData.videoWidth}rpx`, height: `${objData.videoHeight}rpx` }"
              class="video" :src="objData.filePath.path[0]"></video>
          </view>
        </view>
      </view>
      <view class="line ss-flex ss-row-between">
        <!-- 时间 -->
        <text class="time">{{ objData.createTimeText }}</text>
        <!-- 点赞/评论按钮 -->
        <view class="icon ss-flex ss-row-center" @click="showZanPlFlag = !showZanPlFlag">
          <uni-icons type="more-filled" color="#fff"></uni-icons>
          <view class="tool ss-flex" v-show="showZanPlFlag">
            <view class="zan ss-flex ss-row-center" @click="dianzan(objData.isLike, objData.id)">
              <uni-icons :type="objData.isLike == 1 ? 'heart-filled' : 'heart'"
                :color="objData.isLike == 1 ? '#f05f5f' : '#fff'" class="ss-m-r-4"></uni-icons>
              <text>{{ objData.isLike == 1 ? '取消' : '赞' }}</text>
            </view>
            <view class="pl ss-flex ss-row-center" @click="toComment(1, objData.id)">
              <uni-icons type="chat" color="#fff" class="ss-m-r-4"></uni-icons>
              <text>评论</text>
            </view>
          </view>
        </view>
      </view>

      <view class="zancomment uni-row uni-column">
        <!-- 点赞列表 -->
        <view class="zanlist" v-if="objData?.likedList?.length">
          <uni-icons class="ss-m-r-10" type="heart" size="14" color="#596D95"></uni-icons>
          <text class="username">{{ objData.likedList.join('，') }}</text>
        </view>

        <!-- 评论列表 -->
        <template v-if="objData?.reviewList?.length">
          <view class="comment-list">
            <view class="comment-item" v-for="item in objData.reviewList" :key="item.id" hover-class="comment-hover"
              :hover-stay-time="100" @click="toComment(2, objData.id, item)" @longpress="longPressPl(objData.id,item)">
              <template v-if="item.type == 1">
                <text class="username">{{ item.reviewerName }}：</text>
                <text>{{ item.content }}</text>
              </template>
              <template v-else-if="item.type == 2">
                <text class="username">{{ item.reviewerName }}</text>
                <text>回复</text>
                <text class="username">{{ item.replyerName }}：</text>
                <text>{{ item.content }}</text>
              </template>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>
<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  let showZanPlFlag = ref(false); // 显示赞和评论按钮

  const props = defineProps({
    objData: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: null,
    }
  });

  const emits = defineEmits(['dianzan', 'toComment', 'longPressCont', 'longPressPl']);
  const commentIcon = ref(null);

  onMounted(() => {});
  // 长按内容
  const longPressCont = (id) => {
    emits('longPressCont', {
      id
    })
  }
  // 长按评论
  const longPressPl = (id, reviewObj) => {
    emits('longPressPl', {
      id,
      reviewObj
    })
  }

  // 动态计算图片样式
  const getImageStyle = (imageCount) => {
    return {
      width: imageCount == 1 ? `${props.objData.imageWidth}rpx` : '160rpx',
      height: imageCount == 1 ? `${props.objData.imageHeight}rpx` : '160rpx',
    };
  };
  // 点赞
  const dianzan = (isLike, id) => {
    emits('dianzan', {
      isLike,
      id,
    });
  };
  // 评论
  const toComment = (type, recordId, reviewObj) => {
    emits('toComment', {
      type,
      recordId,
      reviewObj,
    });
  };
  // 放大查看图片
  const previewMedia = (image, list) => {
    uni.previewImage({
      indicator: true,
      current: image,
      urls: list,
    });
  };
</script>
<style lang="scss" scoped>
  .item {
    display: flex;
    margin: 0 10rpx 20rpx;
    padding: 10rpx;
    // border-radius: 10px;
    border-bottom: 1px solid #eeeeee;
    height: auto;

    .header {
      padding-right: 16rpx;

      .avatar {
        height: 90rpx;
        width: 90rpx;
        border-radius: 10rpx;
      }
    }

    .comment {
      // padding:0px 10px;
      width: calc(100% - 110rpx);

      .content {
        font-size: 30rpx;
        color: #606266;
        line-height: 42rpx;
        text-align: left;
      }

      .images {
        padding-top: 5px;
      }

      .video {
        max-width: 100%;
      }
    }
  }

  .title {
    font-weight: bold;
    font-size: 30rpx;

    >text {
      color: #ff6000;
    }
  }

  .tool {
    position: absolute;
    right: 80rpx;
    z-index: 999;
    color: #fff;
    // width: 40rpx;
    height: 60rpx;
    background-color: #666;
    border-radius: 6rpx;
    transition-property: width, opacity;
    transition-duration: 100ms;

    .pl,
    .zan {
      width: 150rpx;
    }

    .zan {
      border-right: 1rpx solid #e6e6e6;
    }
  }

  .time {
    color: #999;
    font-size: 24rpx;
  }

  .icon {
    background-color: #eee;
    border-radius: 6rpx;
    width: 70rpx;
    height: 40rpx;
    position: relative;
  }

  .zancomment {
    background-color: #f7f6f7;
    border-radius: 6rpx;
    margin-top: 10rpx;

    .username {
      color: #596d95;
    }

    .zanlist {
      padding: 10rpx 20rpx;
      border-bottom: 1rpx solid #eee;
    }

    .comment-list {
      padding: 10rpx 20rpx;

      .comment-item {
        // padding: 10rpx 20rpx;
      }
    }
  }

  .allImage {
    display: flex;
    // margin-top: 10rpx;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .images {
    margin-right: 10rpx;
    display: inline-block;
  }

  .oneimg {
    width: 160rpx;
    height: 160rpx;

    object-fit: cover;
    object-position: center;
  }
</style>